<template>
	<el-breadcrumb separator="/" class="breadcrumb__container">
		<transition-group name="breadcrumb">
			<el-breadcrumb-item v-for="r in matched" :key="r.path" v-bind="r.path !== route.path ? { to: r.path } : {}">
				{{ r.meta.title }}
			</el-breadcrumb-item>
		</transition-group>
	</el-breadcrumb>
</template>

<script setup name="BreadCrumb">
const route = useRoute();
const matchedArr = computed(() => route.matched.filter(r => !r?.meta?.hideMenu && r?.meta?.title));
const matched = computed(() => {
	const arr = matchedArr.value;
	if (arr.length > 1) {
		arr.shift();
	}
	if (arr[0]?.meta?.title != "首页") {
		arr.unshift({
			path: "/",
			meta: {
				title: "首页"
			}
		});
	}
	return arr;
});
// 获取左侧菜单
</script>

<style lang="scss" scoped>
.breadcrumb-move,
.breadcrumb-enter-active,
.breadcrumb-leave-active {
	@apply transition-all duration-500;
}

.breadcrumb-enter-from,
.breadcrumb-leave-to {
	@apply transform translate-x-1/2 opacity-0;
}

.breadcrumb-leave-active {
	@apply absolute;
}
.breadcrumb__container {
	@apply flex-auto ml-5;
}
</style>
